<style scoped lang="less">
.index {
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 829px) {
  .indexWrap{
    display: none;
  }
  .newsList_iWrap{
    margin: 0.01rem auto 0 ;
    /*width: 90%;*/
    max-width: 85.72rem;
  }
  .carouselWrap{
    height: 4.4rem;
    position: relative;
    .banner{
      height: 100%;
      width: 100%;
      /*position: relative;*/
    }
  }
  .newsList{
    float: inherit;
  }
  .newsLogoWrap{
    /*max-height: 0.4rem;*/
    max-width: 0.4rem;
    margin-right: 0.22rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: .35rem;
  }
  .newsLogo{
    color: #FECE9F;
    font-size: .6rem;
  }
  .title,.news {
    display: inline-block;
    margin-right: 0.1rem;
    padding-top: 0.2rem;
  }
  .title{
    a{
      color:#1A1A1A;
      font-size:0.4rem;
      font-family:PingFang-SC-Bold;
    }
  }
  .newsa {
    font-size:0.4rem;
    font-family:PingFang-SC-Bold;
    color: #E7E7E7 !important;
    opacity: .5;
  }
  .more{
    display: none;
  }
  .listLi{
    width: 90%;
    margin: 0.5rem auto 0;
    font-size: 0.28rem;
  }
  .photo,.newsContent{
    font-size:0.28rem;
    font-family:PingFang-SC-Medium;
    color:rgba(62,58,57,1);
    padding-right: 0.2rem;
  }
  .newsContent{
    padding-right: 0 !important;
  }
  .applyBtn{
    cursor: pointer;
    width: 90%;
    margin: 0.16rem auto;
    height: 0.92rem;
    border-radius: .04rem;
    background-color: #FD9D40;
    text-align: center;
    line-height: 0.92rem;
    color: white;
    font-size: 0.32rem;
    display: block;
  }
  .carousel{
    display: none;
  }
}
@media screen and (min-width: 829px) {
  .index {
    overflow: hidden;
    position: relative;
    background:rgba(246,247,251,1);
    /*min-height: 47.5rem;*/
  }
  .indxWrap {
    width: 80%;
    padding:5rem 10%;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .newsLogoWrap,.more{
    display: none;
  }
  .carouselWrap{
    overflow: hidden;
    .banner{
      height: 100%;
      width: 100%;
      margin-top: 1rem;
      /*max-height: 29.93rem;*/
      position: relative;
    }
  }
  .title,.news,.more{
    font-size:1.86rem;
    padding-right: 1.07rem;
    display: inline-block;
    margin-bottom: 3.64rem;
    a{
      color:rgba(83,48,15,1) !important;
    }
  }
  .more{
    letter-spacing: -2rem;
  }
  .list{
    margin-left: 2.5rem;
  }
  .listLi{
    margin-bottom: 0.43rem;
    max-width: 38.29rem;
    font-size: 1rem;

    /*color: #998B7D;*/
    line-height: 1.79rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    a{
      color: rgba(153, 139, 125, 1);
    }
  }
  .applyBtn{
    margin-left: 3rem;
    display: block;
    max-width: 38.29rem;
    height: 4rem;
    border-radius: .14rem;
    background-color: #F37D0A;
    text-align: center;
    line-height: 4rem;
    color: white;
    font-size: 1.43rem;
    margin-top: 2.29rem;

    color:rgba(255,246,237,1);
  }
}
</style>
<template>
  <div class="index" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="indxWrap">
      <el-col :xs="24" :sm="24" :md="11" :lg="11" class="carouselWrap">
        <carousel class="banner"></carousel>
      </el-col>

      <el-col :xs="0" :sm="0" :md="2" :lg="2" class="carousel" style="height: 2px"></el-col>

      <el-col :xs="24" :sm="24" :md="11" :lg="11" class="newsList">
        <div class="newsList_iWrap">
          <div class="newsLogoWrap">
            <!--<img src="../../static/img/新闻动态.png" alt="" class="newsLogo">-->
            <span class="icon-news icon newsLogo"></span>
          </div>
          <p class="title"><router-link to="indexWorkDynamicso">最新动态</router-link></p>
          <p class="news"><router-link to="indexWorkDynamicso" class="newsa">NEWS</router-link></p>
          <p class="more"><router-link to="indexWorkDynamicso">>></router-link></p>
        </div>
        <section class="list">
          <ul>
            <li v-for="(item, key) in newsList" :key="key" class="listLi">
              <router-link :to="{path:'/indexWorkDynamicst',query: {contentId: item.contentId}}">
                <span class="photo"></span>
                <span class="newsContent">{{item.title}}</span>
              </router-link>
            </li>
            <li v-show="newsList.length==0">
              <span style="color: #CCCCCC">无更多数据展示</span>
            </li>
          </ul>
        </section>
        <router-link to="/training" class="applyBtn">培训报名</router-link>
      </el-col>
    </div>
  </div>
</template>
<script>
import Carousel from './../components/Carousel.vue'
export default {
  data() {
    return {
      newsList:[],
      fullscreenLoading:false
    }
  },
  components: {
    Carousel
  },
  methods: {
    getNews() {
      this.fullscreenLoading=true;
      this.$service('/api/CMSMain/GetContentList', 'post', {
        "Filter": [{
            "GroupName": "1",
            "FieldName": "PlatformType",
            "FieldValue": 0,
            "SqlOperator": 3,
            "IsQuery": true
          },
          {
            "GroupName": "2",
            "FieldName": "categoryType",
            "FieldValue": "News",
            "SqlOperator": 3,
            "IsQuery": true
          }
        ],
        PageIndex:1,
        PageSize:10,
        Sort:{
          "PostTime":1
        }
      }).then((response) => {
        this.fullscreenLoading=false;
        this.newsList = response.Data.Items;
      })
      .catch(err=>{
        this.fullscreenLoading=false;
      })
    }
  },
  mounted() {
    this.getNews()
  },
}

</script>

